<template>
	<div>
		<div v-show="$store.state.loginPage"  class="mePageContainer">
		<router-link to="/me/login" class="header-bg header-link" >
		  <img :src="'https://cube.elemecdn.com'+user_page_info.avatar+'.jpeg'" alt />
		  <div class="user-box">
		    <div class="name-label">{{ user_page_info.username ||'登录/注册'}}</div>
		    <div class="phone-label">
		      <van-icon name="phone-o"></van-icon>{{ user_page_info.mobile ||'登录之后享受更多特权'}}
		    </div>
		  </div>
		  <div>
		    <van-icon name="arrow"></van-icon>
		  </div>
		</router-link>
		<div class="part2">
			<van-row type="flex" >
			  <van-col span="12" >
					  <van-row type="flex" >
					  	<van-col span="24"  style="text-align: center;  color:rgb(255, 95, 62);">
					  		<span style="font-size: 25px;">{{ user_page_info.gift_amount|| 0}}</span>个
					  	</van-col>
					  </van-row>
					  <van-row type="flex" >
					  	<van-col span="24"  style="text-align: center; color: #666;">
					  		红包
					  	</van-col>
					  </van-row>
				</van-col>
				<van-col span="12" >
					<van-row type="flex" >
						<van-col span="24"  style="text-align: center; color: rgb(106, 194, 11);">
							<span style="font-size: 25px;">{{ user_page_info.point|| 0}}</span>个
						</van-col>
					</van-row>
					<van-row type="flex" >
						<van-col span="24"  style="text-align: center; color: #666;">
							金币
						</van-col>
					</van-row>
				</van-col>
			</van-row>
		</div>
		
		<div class="part2">
					<van-row type="flex" >
						<van-col span="2" >
							<van-icon name="location-o"  color="rgb(74, 165, 240)"/>
						</van-col>
						<van-col span="18"  >
							我的地址
						</van-col>
						<van-col span="4"  style="text-align: center; color: #666;">
							<van-icon name="arrow" />
						</van-col>
					</van-row>
		</div>
		

		
		<div class="part2">
					<van-row type="flex" >
						<van-col span="2" >
							<van-icon name="point-gift-o"  color="rgb(252, 123, 83)" />
						</van-col>
						<van-col span="18"  >
							金币商城
						</van-col>
						<van-col span="4"  style="text-align: center; color: #666;">
							<van-icon name="arrow" />
						</van-col>
					</van-row>
					<br>
					<van-row type="flex" >
						<van-col span="2" >
							<van-icon name="point-gift-o"  color="rgb(252, 123, 83)" />
						</van-col>
						<van-col span="18"  >
							分享拿20元现金
						</van-col>
						<van-col span="4"  style="text-align: center; color: #666;">
							<van-icon name="arrow" />
						</van-col>
					</van-row>
		</div>
		<div class="part2">
					<van-row type="flex" >
						<van-col span="2" >
							<van-icon name="location-o"  color="rgb(74, 165, 240)"/>
						</van-col>
						<van-col span="18"  >
							我的客服
						</van-col>
						<van-col span="4"  style="text-align: center; color: #666;">
							<van-icon name="arrow" />
						</van-col>
					</van-row>
					<br>
					<van-row type="flex" >
						<van-col span="2" >
							<van-icon name="location-o"  color="rgb(74, 165, 240)"/>
						</van-col>
						<van-col span="18"  >
							下载饿了么App
						</van-col>
						<van-col span="4"  style="text-align: center; color: #666;">
							<van-icon name="arrow" />
						</van-col>
					</van-row>
					<br>
					<van-row type="flex" >
						<van-col span="2" >
							<van-icon name="location-o"  color="rgb(74, 165, 240)"/>
						</van-col>
						<van-col span="18"  >
							规则中心
						</van-col>
						<van-col span="4"  style="text-align: center; color: #666;">
							<van-icon name="arrow" />
						</van-col>
					</van-row>
		</div>
		</div>
		
		
		<div v-show="!$store.state.loginPage">
			<router-view></router-view>
		</div>
		

		
	</div>
</template>

<script>
	import MePageItem from "../components/MePageItem.vue"
	import axios from 'axios'
	export default {
		created(){
			var isLogin = sessionStorage.getItem("isLogin") 
			if(isLogin == 'true' ){
				console.log("已登录");
				// this.$store.dispatch("getMePage")
				// .then( (res) => {
				// 	console.log(res);
				// } )
				this.getUserInfo()
			}
		},
		data(){
			return{
				minePageshow:true,
				user_page_info:Object
			}
		},
		computed:{
			getAvatar(){
				return  this.$store.getters.avatarSrc
			}
		},
		methods:{
			goLogin(){
				this.$router.push("/me/login")
			},
			// https://h5.ele.me/restapi/eus/v3/users/5674904554?
			getUserInfo(){
				console.log('获取首页');
				var user_id = sessionStorage.getItem("user_id")
				axios.get("/ele/restapi/eus/v3/users/"+user_id)
					.then( res =>{
						 this.user_page_info = res.data
						this.user_page_info.avatar =  processImgUrl(this.user_page_info.avatar)
						 console.log(res.data);
						 
					})
			}
		}
	}
	
	//图片路径处理函数
	function processImgUrl(url){
		var newUrl = ''
		var arr= [...url]
		arr.splice(3,0,'/')
		arr.splice(1,0,'/')
		arr.splice(0,0,'/')
		newUrl = arr.join("")
		return newUrl
	}
</script>

<style scoped>

	img{
		width: 60px;
		height: 60px;
		border-radius:50% ;
		margin: 0;
		margin-right: 5vw;
	}

		
		.header-link {
		  display: block;
		  height: 27vw;
		  display: flex;
		  align-items: center;
		  color: white;
		  box-sizing: border-box;
		  padding: 5vw;
		  font-size: 4vw;
		  background-color: rgb(0,142,255);
		}

		.user-box {
		  flex-grow: 1;
		}
		.name-label {
		  font-weight: bold;
		  font-size: 20px;
		}
		.phone-label {
		  margin-top: 2vw;
		  font-size: 14px;
		}
		
		.mePageContainer{
			background-color: rgb(245,245,245)
		}
		.part2{
			padding: 20px;
			margin-bottom: 10px;
			background-color: white
		}
		
		
		
		
		
</style>
